import React from 'react';
import { forwardRef } from 'react';
import './index.scss';

export interface WaterWellDataProps {
  width?: string | number;
  height?: string | number;
  iconPath?: string;
  iconSize?: {
    width?: number;
    height?: number;
  };
  dataValue?: string | number;
  dataUnit?: string;
  statusLabel?: string;
  dataValueColor?: string;
  dataUnitColor?: string;
  statusLabelColor?: string;
  showGradientText?: boolean;
  gradientColors?: string[];
  showGradientBackground?: boolean;
  gradientBackgroundColors?: string[];
  gradientBackgroundOpacity?: number;
  fontSize?: {
    dataValue?: number;
    dataUnit?: number;
    statusLabel?: number;
  };
  fontWeight?: {
    dataValue?: string | number;
    dataUnit?: string | number;
    statusLabel?: string | number;
  };
  onIconClick?: () => void;
  onDataClick?: () => void;
  onStatusClick?: () => void;
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
  onClick?: () => void;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const WaterWellData = forwardRef<HTMLDivElement, WaterWellDataProps>((props, ref) => {
  const {
    width = 184,
    height = 48,
    iconPath = 'http://localhost:8085/static/images/qixiangfangzhai/bz105.png',
    iconSize = { width: 32, height: 36 },
    dataValue = '24',
    dataUnit = '个',
    statusLabel = '正常',
    dataValueColor = '#1AD7FF',
    dataUnitColor = '#FFFFFF',
    statusLabelColor = '#FFFFFF',
    showGradientText = true,
    gradientColors = ['#FFFFFF', '#81C6FF'],
    showGradientBackground = true,
    gradientBackgroundColors = [
      'rgba(52,165,255,0)',
      'rgba(52,165,255,0.39)',
      'rgba(52,165,255,0.45)',
      'rgba(52,165,255,0.35)',
      'rgba(0,139,255,0)'
    ],
    gradientBackgroundOpacity = 0.65,
    fontSize = {
      dataValue: 20,
      dataUnit: 14,
      statusLabel: 14
    },
    fontWeight = {
      dataValue: 'bold',
      dataUnit: 500,
      statusLabel: 500
    },
    onIconClick,
    onDataClick,
    onStatusClick,
    theme = 'dark',
    style = {},
    className = '',
    onClick,
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    '--gradient-text-start': gradientColors[0] || '#FFFFFF',
    '--gradient-text-end': gradientColors[1] || '#81C6FF',
    '--gradient-bg-opacity': gradientBackgroundOpacity,
    '--gradient-bg-0': gradientBackgroundColors[0] || 'rgba(52,165,255,0)',
    '--gradient-bg-27': gradientBackgroundColors[1] || 'rgba(52,165,255,0.39)',
    '--gradient-bg-51': gradientBackgroundColors[2] || 'rgba(52,165,255,0.45)',
    '--gradient-bg-79': gradientBackgroundColors[3] || 'rgba(52,165,255,0.35)',
    '--gradient-bg-100': gradientBackgroundColors[4] || 'rgba(0,139,255,0)',
    ...style
  } as React.CSSProperties;

  const handleIconClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (onIconClick) {
      onIconClick();
    }
  };

  const handleDataClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (onDataClick) {
      onDataClick();
    }
  };

  const handleStatusClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (onStatusClick) {
      onStatusClick();
    }
  };

  const waterWellDataClassName = ['water-well-data', theme, className].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={waterWellDataClassName}
      style={componentStyle}
      onClick={onClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {/* 集水井图标 */}
      <div 
        className="well-icon"
        style={{
          width: `${iconSize.width}px`,
          height: `${iconSize.height}px`,
          backgroundImage: iconPath ? `url(${iconPath})` : undefined
        }}
        onClick={handleIconClick}
      />

      {/* 数据区域 */}
      <div className="data-area" onClick={handleDataClick}>
        {/* 渐变背景 */}
        {showGradientBackground && (
          <div className="gradient-background" />
        )}

        {/* 数据值 */}
        <div 
          className={`data-value ${showGradientText ? 'gradient-text' : ''}`}
          style={{
            color: !showGradientText ? dataValueColor : undefined,
            fontSize: `${fontSize.dataValue}px`,
            fontWeight: fontWeight.dataValue
          }}
        >
          {dataValue}
        </div>

        {/* 数据单位 */}
        <div 
          className="data-unit"
          style={{
            color: dataUnitColor,
            fontSize: `${fontSize.dataUnit}px`,
            fontWeight: fontWeight.dataUnit
          }}
        >
          {dataUnit}
        </div>
      </div>

      {/* 状态标签 */}
      <div 
        className="status-label"
        style={{
          color: statusLabelColor,
          fontSize: `${fontSize.statusLabel}px`,
          fontWeight: fontWeight.statusLabel
        }}
        onClick={handleStatusClick}
      >
        {statusLabel}
      </div>
    </div>
  );
});

WaterWellData.displayName = 'WaterWellData';

export default WaterWellData; 